<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="../lib/css/reset.css" />
    <!-- 引入字体图标样式表 .css-->
    <link rel="stylesheet" href="../lib/fonts/iconfont.css">
    <!-- <link rel="stylesheet" href="../css/common.css" /> -->
    <!-- 引入轮播图样式表  swiper-bundle.min.css -->
    <link rel="stylesheet" href="../lib/css/swiper-bundle.min.css">
    <!-- 引入详情页样式表 index.css -->
    <link rel="stylesheet" href="../css/details.css" />
    <!-- 引入轮播图js文档 -->
    <script src="../lib/js/swiper-bundle.min.js"></script>
     <!-- 引入axios库 -->
     <script src="../lib/js/axios.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="container">
            <!-- 登录注册 -->
            <div>
                <a href="../pages/login.html" class="login">登录</a>
                <a href="../pages/register.html">注册</a>
                <a href="#">消息通知</a>
            </div>
            <!-- 购物车 -->
            <div class="cart"><a href="../pages/cart.html"> <span class="iconfont icon-gouwuchekong"></span> 购物车( <span class="amount">0</span> )</a></div>
        </div>
    </div>
    <!-- 导航条 -->
    <div id="nav">
        <div class="container">
            <div>
                <a href="../pages/index.html"><img src="../static/images/logo.png" alt="logo" /></a>
                <div class="fl menu">
                    <div><a href="../pages/index.html">首页</a></div>
                    <div><a href="#">鸿蒙智联</a></div>
                    <div><a href="#">莫塞尔</a></div>
                    <div><a href="#">小米智选</a></div>
                    <div><a href="#">HarmonyOS</a></div>
                    <div><a href="#">特惠企采</a></div>
                    <div><a href="#">教育购</a></div>
                </div>
            </div>
            <div><span class="iconfont icon-fangdajing"></span> </div>
        </div>
    </div>
    <div id="main">
        <div class="container">
            <!-- 商品信息提示 -->
            <div class="tip"></div>
            <!-- 商品详情展示 -->
            <div class="detail">
                <!-- 左边商品图片展示区 -->
                <div class="left">

                    <!-- 放置商品图片盒子 -->
                    <div class="img">
                        <!-- 遮罩层 -->
                        <div class="mask"></div>
                        <img src="" alt="">
                    </div>
                    <!-- 放置商品小图盒子 -->
               
                    <ul>
                    
                    </ul>
                </div>
                <!-- 放大镜 -->
                <div class="glass"></div>
                  <!-- 右边商品描述区 -->
            <div class="right">
                <!-- 商品名字 -->
                <h1> 惠普(HP)战99 全新12代15.6英寸高性能笔记本设计师创作本工作站（i7-12700H 16G 512G T600 4G独显 高色域）</h1>
                <p class="describe">【618开门红: 最高优惠500元 到手价8488元起】①享24期免息 ②赠199元官方保护壳 ③赠159元40W超级快充套装 ④整点下单限量赠三脚架自拍杆 | 订金用户点击付尾款>></p>
                 <div class="price"><span>秒杀价</span><span>￥</span><span>8999</span></div>
                 <h2><span>商品编码</span><span></span></h2> 
                 <div class="btn"><button type="button" class="addCart">加入购物车</button><button type="button" class="buy">立即购买</button></div>
            </div>
            </div>
        </div>
    </div>
 <!-- 页脚 -->
 <div id="footer">
    <div class="container">
        <ul>
            <li><a href="#"><span class="iconfont icon-weixiu"></span>预约维修服务</a></li>
            <li><a href="#"><span class="iconfont icon-shouhoutianbaotui"></span>7天无理由退货</a></li>
            <li><a href="#"><span class="iconfont icon-15tianbaotui01"></span>15天免费换货</a></li>
            <li><a href="#"><span class="iconfont icon-gift"></span>满69免费包邮</a></li>
            <li><a href="#"><span class="iconfont icon-dizhi"></span>520余家售后网点</a></li>
        </ul>
        <div class="wrapper">
            <div class="service ">
                <ul>
                    <li class="title"><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
                <ul>
                    <li class="title"><a href="#">服务支持</a></li>
                    <li><a href="#">售后政策</a></li>
                    <li><a href="#">自动服务</a></li>
                    <li><a href="#">相关下载</a></li>
                </ul>
                <ul>
                    <li class="title"><a href="#">线下门店</a></li>
                    <li><a href="#">小米之家</a></li>
                    <li><a href="#">服务网点</a></li>
                    <li><a href="#">授权体验店/专区</a></li>
                </ul>
                <ul>
                    <li class="title"><a href="#">关于小米</a></li>
                    <li><a href="#">了解小米</a></li>
                    <li><a href="#">加入小米</a></li>
                    <li><a href="#">投资者关系</a></li>
                    <li><a href="#">企业社会责任</a></li>
                    <li><a href="#">廉洁举报</a></li>
                </ul>
                <ul>
                    <li class="title"><a href="#">关注我们</a></li>
                    <li><a href="#">新浪微博</a></li>
                    <li><a href="#">官方微信</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">公益基金会</a></li>
                </ul>
                <ul>
                    <li class="title"><a href="#">特色服务</a></li>
                    <li><a href="#">F 码通道</a></li>
                    <li><a href="#">礼物码 </a></li>
                    <li><a href="#">防伪查询</a></li>
                </ul>
            </div>
            <div class="linkUs">
                <h2>400-100-5678</h2>
                <h3>8:00-18:00&nbsp;（仅收市话费）</h3>
                <button>人工客服</button>
                <h4>关注小米：<a href="#"><span class="iconfont icon-weibo">&nbsp;</a><a href="#"></span><span class="iconfont icon-weixin"></span></a></h4>
            </div>
        </div>
        <div class="copyright">
            <div><a href="#">网站地图</a> | <a href="#">联系我们</a> | <a href="#">关注关注</a> | <a href="#">采购系统入口</a></div>
            <div>
                分享到 :
                <a href="#"><img src="../static/images/icon2.jpg" alt=""></a>
                <a href="#"><img src="../static/images/icon3.jpg" alt=""></a>
                <a href="#"><img src="../static/images/icon4.jpg" alt=""></a>
                <a href="#"><img src="../static/images/icon5.jpg" alt=""></a>
                <a href="#"><img src="../static/images/icon6.jpg" alt=""></a>
            </div>
            <div>
                COPYRIGHT &copy;; 2013控股:控股集团版权 所有浙ICP备06005901号 技术支持:博采互动
            </div>
        </div>
    </div>

</div>
    <script src="../js/details.js"></script>
</body>

</html>